<template>
	<div style="border: 1px solid #f5f5f5">
		<div style="width: 100%; height: 570px; overflow-y: auto">
			<div class="fw-bolder" style="background-color: #f5f5f5; padding: 5px 10px">货品详情</div>
			<div class="padding-x-15">
				<a-form
					class="margin-y-15"
					:label-col="{
						md: { span: 7 },
						sm: { span: 4 },
						xs: { span: 24 }
					}"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="20" :sm="20" :xs="20">
							<div class="fs-16 fw-bolder margin-y-15">采购基本信息</div>
							<a-form
								class="margin-y-15"
								:label-col="{
									md: { span: 7 },
									sm: { span: 4 },
									xs: { span: 24 }
								}"
								:wrapper-col="{
									md: { span: 17 },
									sm: { span: 20 },
									xs: { span: 24 }
								}"
							>
								<a-row :gutter="24">
									<!-- <a-col :md="12" :sm="12" :xs="12">
                    <div class="flex align-center padding-y-10">
                      <div class="margin-right-10">供应商：</div>
                      <div class="flex1">{{ info.supplier_code_name }}</div>
                    </div>
                  </a-col> -->
									<a-col :md="12" :sm="12" :xs="12">
										<div class="flex align-center padding-y-10">
											<div class="margin-right-10">收货方式：</div>
											<div class="flex1">{{ info.receive_type_name }}</div>
										</div>
									</a-col>
									<!-- <a-col :md="12" :sm="12" :xs="12" >
										<div class="flex align-center padding-y-10">
											<div class="margin-right-10">货品类别：</div>
											<div class="flex1">{{info.receive_type_name}}</div>
										</div>
									</a-col> -->
									<a-col :md="12" :sm="12" :xs="12">
										<div class="flex align-center padding-y-10">
											<div class="margin-right-10">入库位置：</div>
											<div class="flex1">{{ info.come_type_code_name }}</div>
										</div>
									</a-col>
									<a-col :md="12" :sm="12" :xs="12">
										<div class="flex align-center padding-y-10">
											<div class="margin-right-10">结算方式：</div>
											<div class="flex1">{{ info.settle_type_name }}</div>
										</div>
									</a-col>
								</a-row>
							</a-form>
						</a-col>
						<a-col :md="4" :sm="4" :xs="4"><div></div></a-col>
					</a-row>
				</a-form>
				<a-form
					class="margin-y-15"
					:label-col="{
						md: { span: 7 },
						sm: { span: 4 },
						xs: { span: 24 }
					}"
					:wrapper-col="{
						md: { span: 17 },
						sm: { span: 20 },
						xs: { span: 24 }
					}"
				>
					<a-row :gutter="24">
						<a-col :md="20" :sm="20" :xs="20">
							<div class="fs-16 fw-bolder margin-y-15">货品信息</div>
							<a-form
								class="margin-y-15"
								:label-col="{
									md: { span: 7 },
									sm: { span: 4 },
									xs: { span: 24 }
								}"
								:wrapper-col="{
									md: { span: 17 },
									sm: { span: 20 },
									xs: { span: 24 }
								}"
							>
								<a-row :gutter="24">
									<a-col :md="12" :sm="12" :xs="12" v-for="(item, index) in goods.sku_info" :key="index" v-show="item.column != 'thumb'">
										<div class="flex align-center padding-y-10">
											<div class="margin-right-10">{{ item.name }}：</div>
											<div class="flex1" :class="{ mohu: item.do_secret == 1 }">
												<template v-if="item.column_type == 'selectajaxlike' || item.column_type == 'select' || item.column_type == 'selectajax'">
													{{ item.value_name }}
												</template>
												<template v-else>
													{{ item.value }}
												</template>
											</div>
										</div>
									</a-col>
								</a-row>
							</a-form>
						</a-col>
						<a-col :md="4" :sm="4" :xs="4" v-if="thumb_url">
							<div><a-image :width="100" :height="100" :src="thumb_url" /></div>
						</a-col>
					</a-row>
				</a-form>
				<div>
					<div class="fs-16 fw-bolder margin-y-15">主石信息</div>
					<div>
						<vxe-table
							v-if="table1.tableData.length > 0"
							ref="table1111"
							border
							show-overflow
							:column-config="{ resizable: true }"
							:loading="table1.loading"
							:data="table1.tableData"
							:cell-class-name="cellClass1"
						>
							<vxe-column type="seq" title="NO" width="60" fixed="left" />
							<vxe-column :field="item.column" :title="item.name" width="150" v-for="(item, index) in table1.column" :key="index" />
						</vxe-table>
					</div>
				</div>
				<div>
					<div class="fs-16 fw-bolder margin-y-15">副石信息</div>
					<div>
						<vxe-table
							v-if="table2.tableData.length > 0"
							ref="table2222"
							border
							show-overflow
							:column-config="{ resizable: true }"
							:loading="table2.loading"
							:data="table2.tableData"
							:cell-class-name="cellClass2"
						>
							<vxe-column type="seq" title="NO" width="60" fixed="left" />
							<vxe-column :field="item.column" :title="item.name" width="150" v-for="(item, index) in table2.column" :key="index" />
						</vxe-table>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, unref, reactive, watch, onMounted } from 'vue';
import { message, Modal } from 'ant-design-vue';
import { emailReg, phoneReg, identityReg } from 'ele-admin-pro';
import { useRouter } from 'vue-router';
import { receipts_purchase_detail } from '@/api/jewelry/receipts_return';
import { goods_detail } from '@/api/jewelry/receipts_purchase';

const props = defineProps({
	info: Object,
	goods: Object,
	thumb_url: String
});

const { currentRoute, push } = useRouter();
const { query } = unref(currentRoute);

// 提交状态
const loading = ref(false);
const info = ref({});
const goods = ref({});
const thumb_url = ref(null);
//主石信息
const table1 = reactive({
	loading: false,
	column: [],
	tableData: []
});
//副石信息
const table2 = reactive({
	loading: false,
	column: [],
	tableData: []
});

watch(
	() => [props.info, props.goods, props.thumb_url],
	(newValue, oldValue) => {
		if (newValue[0]) {
			info.value = newValue[0];
		}
		if (newValue[1]) {
			goods.value = newValue[1];
			if(newValue[1].master_gem){
				table1.column = newValue[1].master_gem.column;
				table1.tableData = newValue[1].master_gem.row_list;
				table1.column.forEach(item => {
					if (item.column_type == 'select' || item.column_type == 'selectajax') {
						item.column = item.column + '_name';
					}
				});
			}
			if(newValue[1].vice_gem){
				table2.column = newValue[1].vice_gem.column;
				table2.tableData = newValue[1].vice_gem.row_list;
			}
		}
		if (newValue[2]) {
			thumb_url.value = newValue[2];
		}
	}
);
const cellClass1 = (val) => {
	for(var i = 0; i < table1.column.length - 1; i++ ){
		if(table1.column[i].do_secret == 1 && val.column.title == table1.column[i].name){
			return 'mohu'
		}
	}
}
const cellClass2 = (val) => {
	for(var i = 0; i < table2.column.length - 1; i++ ){
		if(table2.column[i].do_secret == 1 && val.column.title == table2.column[i].name){
			return 'mohu'
		}
	}
}
</script>
<style scoped></style>
